<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script  src="jquery-1.4.2.min.js" type="text/javascript"></script>
 <style>
 iframe{position:absolute;left:0;top:0;border:0;}
 #a{display:none;}

 
#loading-mask{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:800px;
	z-index:20000;
	background-color:#666;
	display:none;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	opacity: 0.5;
}
#loading{
    position:absolute;
    left:45%;
    top:40%;
    padding:2px;
    z-index:20001;
    height:800px;
	display:none;
}
#loading img {
    margin-bottom:5px;
}
#loading .loading-indicator{
    background:white;
    color:#555;
    font:bold 13px tahoma,arial,helvetica;
    padding:10px;
    margin:0;
    text-align:center;
    height:auto;
}
 </style>
 <SCRIPT LANGUAGE="JavaScript">

function changeI(s){
	showLoading();
	var iframe = document.getElementById("a");
	iframe.src = s;

	if (!/*@cc_on!@*/0) { //if not IE
		iframe.onload = function(){
			ch();
		};
	} else {
		iframe.onreadystatechange = function(){
			if (iframe.readyState == "complete"){
				ch();
			}
		};
	}
	/* 方法2:
	if (iframe.attachEvent){
		iframe.attachEvent("onload", function(){
			ch();
		});
	} else {
		iframe.onload = function(){
			ch();
		};
	}
	*/
}

function ch(){
	$("#c iframe").hide();
	$("#a").show();
	hideLoading();
}

function showLoading(){
	$("#loading-mask,#loading").show();
}
function hideLoading(){
	$("#loading-mask,#loading").hide();

}
 </SCRIPT>
</head>
<body>

<div id="loading-mask" style=""></div>   
<div id="loading">
	<div class="loading-indicator">
		  <img src="indicator_circle_ball.gif" width="16" height="16" style="margin-right:8px;" align="absmiddle"/>正在与服务器通信,请稍后...<br/>
		  <a href="#nogo"  id="tCancel" onclick="hideLoading();">取消</a>
	</div>
</div>

 <input  type="button" onclick="changeI('http://www.cssrain.cn')" value="123" /> <input  type="button" onclick="changeI('http://www.google.cn')" value="baidu" /><br/>

 <div  id="c" style="position:relative;">
	 <iframe src=""  id="a" width="700" height="700" />
	 <iframe src="http://www.baidu.com" width="700" height="700" />
 </div>


</body>
</html>

